<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
	
	<!-- mobile meta tag -->		
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<title>{$position}</title> 
	
	<!-- main style -->
	<link rel="stylesheet" type="text/css" href="{$file_dir}/style.css" media="screen" />
	
	<!-- color scheme -->
	<link rel="stylesheet" type="text/css" href="{$file_dir}/color-schemes/red/red.css" media="screen" title="red" />
	<link rel="stylesheet" type="text/css" href="{$file_dir}/color-schemes/yellow/yellow.css" media="screen" title="yellow" />
	<link rel="stylesheet" type="text/css" href="{$file_dir}/color-schemes/orange/orange.css" media="screen" title="orange" />
	<link rel="stylesheet" type="text/css" href="{$file_dir}/color-schemes/blue/blue.css" media="screen" title="blue" />
	<link rel="stylesheet" type="text/css" href="{$file_dir}/color-schemes/green/green.css" media="screen" title="green" />
	<link rel="stylesheet" type="text/css" href="{$file_dir}/color-schemes/purple/purple.css" media="screen" title="purple" />
	
	<!--miscellaneous-->
	<link rel="stylesheet" type="text/css" href="{$file_dir}/css/superfish.css" media="screen">
	<link rel="stylesheet" type="text/css" href="{$file_dir}/css/prettyPhoto.css" media="screen"/>
	<link rel="stylesheet" type="text/css" href="{$file_dir}/css/font-awesome.css" media="screen"/>
	<link rel="stylesheet" type="text/css" href="{$file_dir}/css/audioplayer.css" media="screen" />	
	
	<!-- revolution slider settings -->
	<link rel="stylesheet" type="text/css" href="{$file_dir}/rs-plugin/css/settings.css" media="screen" />		

	<!-- setting mobile environment -->		
	<link rel="stylesheet" type="text/css" href="{$file_dir}/css/responsive.css" media="screen" />	
	
	<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="{$file_dir}/css/font-awesome-ie7.min.css">
	<![endif]-->
	
	<!--[if lt IE 9]>
	<script src="html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<script type="text/javascript" src="{$file_dir}/js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="{$file_dir}/js/hoverIntent.js"></script>
	<script type="text/javascript" src="{$file_dir}/js/superfish.js"></script>
	<script type="text/javascript" src="{$file_dir}/js/jquery.jcarousel.js"></script>
	<script type="text/javascript" src="{$file_dir}/js/jquery.tweet.js"></script>
	<script type="text/javascript" src="{$file_dir}/js/jflickrfeed.js"></script>
	<script type="text/javascript" src="{$file_dir}/js/jquery.prettyPhoto.js"></script>
	<script type="text/javascript" src="{$file_dir}/js/slides.min.jquery.js"></script>
	<script type="text/javascript" src="{$file_dir}/js/jquery.mobilemenu.js"></script>
	<script type="text/javascript" src="{$file_dir}/js/jquery.contact.js"></script>
	<script type="text/javascript" src="{$file_dir}/js/jquery.preloadify.min.js"></script>
	<script type="text/javascript" src="{$file_dir}/js/jquery.jplayer.min.js"></script>
	<script type="text/javascript" src="{$file_dir}/js/jquery.isotope.min.js"></script>
	
	<!-- jQuery Revolution Slider -->
	<script type="text/javascript" src="{$file_dir}/rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
	<script type="text/javascript" src="{$file_dir}/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
	
	<script type="text/javascript" src="{$file_dir}/js/custom.js"></script>
	
	<link rel="stylesheet" type="text/css" href="{$file_dir}/template-changer.css" media="screen"/>		
	<script type="text/javascript" src="{$file_dir}/js/jquery.cookie.js"></script>	
	<script type="text/javascript" src="{$file_dir}/js/styleswitch.js"></script>	
	
	<!-- Google Web Fonts -->
	<link href='fonts.googleapis.com/css@family=Open+Sans_3A300,400,600,700' rel='stylesheet' type='text/css'>


<script type="text/javascript">
	$(function()
		{
			// Call stylesheet init so that all stylesheet changing functions 
			// will work.
			$.stylesheetInit();
			
			// This code loops through the stylesheets when you click the link with 
			// an ID of "toggler" below.
			$('#toggler').bind(
				'click',
				function(e)
				{
					$.stylesheetToggle();
					return false;
				}
			);
			
			// When one of the styleswitch links is clicked then switch the stylesheet to
			// the one matching the value of that links rel attribute.
			$('.styleswitch').bind(
				'click',
				function(e)
				{
					$.stylesheetSwitch(this.getAttribute('rel'));
					return false;
				}
			);
		}
	);
</script>	
	
</head> 

<body> 

<!-- setting a fullscreen image as background:
<img id="bg" src="images/apple.jpg" alt="apple-background" />
-->


	<div class="theme-changer-wrap">
		<div class="theme-changer">
			<div class="changer-inner">				
				<span> 颜色设置 </span>
					<ul id="colors">
						<li><a href="search.html@style=yellow" rel="yellow" class="styleswitch color-yellow">yellow</a></li>
						<li><a href="search.html@style=orange" rel="orange" class="styleswitch color-orange">orange</a></li>
						<li><a href="search.html@style=blue" rel="blue" class="styleswitch color-blue">blue</a></li>
						<li><a href="search.html@style=green" rel="green" class="styleswitch color-green">blue</a></li>
						<li><a href="search.html@style=red" rel="red" class="styleswitch color-red">blue</a></li>
						<li><a href="search.html@style=purple" rel="purple" class="styleswitch color-purple">blue</a></li>
					
					</ul>
					<div style="clear:both; height:10px; width:100%"></div>				
			</div>
		</div>
		<div class="open-close"></div>
	</div> 	
<div id="wrapper">
	<header id="header">
		<div class="centered-wrapper">
			<div class="one-third">
				<div class="logo"><a href="index.html"></a></div>
			</div><!--end one-third-->
			
			<div class="two-third column-last">		
				<nav id="navigation">
					<ul id="mainnav">
						<li><a href="index.php"><span>主页</span></a>
						</li>
						{foreach from=$categories item=cat}
							<li><a href="{$cat.url}"><span>{$cat.name|escape:html}</span></a><ul>
								{foreach from=$cat.cat_id item=child}
									<li><a href="{$child.url}">{$child.name|escape:html}</a></li>
								{/foreach}
							</ul></li>
						{/foreach}
					</ul>
				</nav><!--end navigation-->
			</div><!--end two-third-->
		<div class="clear"></div>			
		</div><!--end centered-wrapper-->
	</header>	
			
	<div class="top-shadow"></div>
	
	<section class="page-title">
	<div class="page-background">
		<div class="pattern1"></div>
	</div>
	<div class="bottom-shadow"></div>
		<div class="title-wrapper">
			<div class="title-bg">
				<div class="title-content">
					<div class="one-third">
						<h2>{$page_title}</h2>
					</div>					
				</div><!--end title-content-->
			</div>
		</div><!--end title-wrapper-->
	</section>	
	<div class="centerPadd">
	<div class="centered-wrapper">			
		<section id="portfolio-wrapper">
			<ul class="portfolio four-columns">
                {foreach from=$goods_list item=goods}
                
					<li data-category="branding" class="branding print">
						<a href="{$goods.url}">
							<span class="item-on-hover"></span>
							<img src="{$goods.goods_thumb}" />
						</a>
						<div class="portfolio-carousel-details">
							<h3><a href="portfolio-single.html">{$goods.goods_name}</a></h3>
							<span>{$goods.market_price}</span>
						</div>					
					</li>
				
                {/foreach}
			</ul>	
		</section>	
		
		<div class="clear"></div>
	</div><!--end centered-wrapper-->
		
	<div class="pagenav">
		<!--翻页 start-->
		<form name="selectPageForm" action="{$smarty.server.PHP_SELF}" method="get">
		<!-- {if $pager.styleid eq 0 } -->
		<div id="pager">
		  {$lang.pager_1}{$pager.record_count}{$lang.pager_2}{$lang.pager_3}{$pager.page_count}{$lang.pager_4} <span> <a href="{$pager.page_first}">{$lang.page_first}</a> <a href="{$pager.page_prev}">{$lang.page_prev}</a> <a href="{$pager.page_next}">{$lang.page_next}</a> <a href="{$pager.page_last}">{$lang.page_last}</a> </span>
			<!--{foreach from=$pager.search key=key item=item}-->
			  {if $key eq 'keywords'}
				  <input type="hidden" name="{$key}" value="{$item|escape:decode_url}" />
				{else}
				  <input type="hidden" name="{$key}" value="{$item}" />
			  {/if}
			<!--{/foreach}-->
			<select name="page" id="page" onchange="selectPage(this)">
			{html_options options=$pager.array selected=$pager.page}
			</select>
		</div>
		<!--{else}-->

		<!--翻页 start-->
		 <div id="pager" class="pagebar">
		  <span class="f_l f6" style="margin-right:10px;">{$lang.pager_1}<b>{$pager.record_count}</b> {$lang.pager_2}</span>
		  <!-- {if $pager.page_first} --><a href="{$pager.page_first}">{$lang.page_first} ...</a><!-- {/if} -->
		  <!-- {if $pager.page_prev} --><a class="prev" href="{$pager.page_prev}">{$lang.page_prev}</a><!-- {/if} -->
		  <!-- {if $pager.page_count neq 1} -->
			<!--{foreach from=$pager.page_number key=key item=item}-->
			  <!-- {if $pager.page eq $key} -->
			  <span class="current">{$key}</span>
			  <!-- {else} -->
			  <a href="{$item}">[{$key}]</a>
			  <!-- {/if} -->
			<!--{/foreach}-->
		  <!-- {/if} -->

		  <!-- {if $pager.page_next} --><a class="next" href="{$pager.page_next}">{$lang.page_next}</a><!-- {/if} -->
		  <!-- {if $pager.page_last} --><a class="last" href="{$pager.page_last}">...{$lang.page_last}</a><!-- {/if} -->
		  <!-- {if $pager.page_kbd} -->
			<!--{foreach from=$pager.search key=key item=item}-->
			  {if $key eq 'keywords'}
				  <input type="hidden" name="{$key}" value="{$item|escape:decode_url}" />
				{else}
				  <input type="hidden" name="{$key}" value="{$item}" />
			  {/if}
			<!--{/foreach}-->
			<kbd style="float:left; margin-left:8px; position:relative; bottom:3px;"><input type="text" name="page" onkeydown="if(event.keyCode==13)selectPage(this)" size="3" class="B_blue" /></kbd>
			<!-- {/if} -->
		</div>
		<!--翻页 END-->

		<!-- {/if} -->
		</form>
	</div>
	<script type="Text/Javascript" language="JavaScript">
	<!--
	{literal}
		function selectPage(sel)
		{
		  sel.form.submit();
		}
	{/literal}
	//-->
	</script>
	<div class="space"></div>
	
	<footer id="footer">
		<div class="centered-wrapper">
			<div id="topfooter">
				<div class="one-half">
					<h3>About Us</h3>
					<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam veritatis et quasi nam liber tempore.</p>
					<div class="footer-logo"></div>
				</div><!--end percent-one-half-->
				<div class="one-half column-last">
					<div class="percent-one-half">
						<h3>We are on Twitter</h3>
						<div class="tweet"></div>
					</div>
					
					<div class="percent-one-half column-last">
						<h3>Get in Touch with Us</h3>
						<ul>
							<li>Address: 1600 Amphitheatre Parkway, Mountain View, CA 94043</li>
							<li>Phone: +321 123 456 7<br/>
							E-mail: <a href="mailto:">johndoe@ipsum.com</a></li>
						</ul>
					</div><!--end one-half-->					
				</div><!--end one-half-->
			</div><!--end topfooter-->
		</div><!--end centered-wrapper-->
		
		<div id="bottomfooter">		
			<div class="centered-wrapper">		
				<div class="one-half">
					<p>COPYRIGHT &copy; 2013 - SYMPATHIQUE | ALL RIGHTS RESERVED</p>
				</div><!--end one-half-->

				<div class="one-half column-last">
					<ul id="social">
						<li><a class="rss" href="#">RSS Feed</a></li>
						<li><a class="facebook" href="#">Facebook</a></li>
						<li><a class="twitter" href="#">Twitter</a></li>
						<li><a class="flickr" href="#">Flickr</a></li>
						<li><a class="google" href="#">Google</a></li>
						
					<!-- You can add social icons for forrst, dribbble, vimeo, linkedin and skype. Take the ones you need from the list and paste them above
					
						<li><a class="forrst" href="#">Forrst</a></li>
						<li><a class="dribbble" href="#">Dribbble</a></li>
						<li><a class="vimeo" href="#">Vimeo</a></li>
						<li><a class="linkedin" href="#">LinkedIn</a></li>
						<li><a class="skype" href="#">Skype</a></li> 
					-->	
					</ul>					
				</div><!--end one-half-->
			</div><!--end centered-wrapper-->				
		</div><!--end bottomfooter-->
	</footer><!--end footer-->	
	
</div><!--end wrapper-->
</body> 
</html>